<template>
  <div>
    <div class="inline-container">
      <!-- 删除已读信息 -->
      <el-button type="primary" icon="el-icon-delete" @click="delRead()"
        >删除已读
      </el-button>
      <!-- 搜索框 -->
      <div class="centered-search">
        <el-form :inline="true" :model="sysMsgQuery" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input
              v-model="sysMsgQuery.titile"
              placeholder="标题"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="已读/未读">
            <el-select
              v-model="sysMsgQuery.isRead"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in isRead"
                :key="item.vlaue"
                :label="item.name"
                :value="item.vlaue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMsgData()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 2、分隔线区域 -->
    <el-divider></el-divider>
    <!-- 3、表单 -->
    <el-table :data="msgData" style="width: 100%" border>
      <el-table-column type="index" width="80" label="序号"></el-table-column>
      <el-table-column prop="titile" label="标题" width="500">
      </el-table-column>
      <el-table-column prop="msgType" label="消息类型" width="150">
        <template slot-scope="scope">
          <!-- 使用插槽来处理空单元格情况 -->
          <span v-if="scope.row.msgType == 1">系统通知</span>
          <span v-else>用户咨询</span>
        </template>
      </el-table-column>
      <el-table-column prop="isRead" label="已读/未读" width="150">
        <template slot-scope="scope">
          <!-- 使用插槽来处理空单元格情况 -->
          <span v-if="scope.row.isRead == 1">已读</span>
          <span v-else>未读</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="deatailsBox(scope.row.id)"
            title="详情"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="del(scope.row.id)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="sysMsgQuery.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="sysMsgQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 详情弹框 -->
    <el-dialog title="详情" :visible.sync="dialogVisible">
      <el-descriptions class="margin-top" :column="2" size="medium" border>
        <el-descriptions-item>
          <template slot="label">标题</template>
          {{ form.titile }}
        </el-descriptions-item>
        <el-descriptions-item style="height: 30%">
          <template slot="label"> 消息类型 </template>
          <span v-if="form.msgType == 1">系统通知</span>
          <span v-else>用户咨询</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 内容 </template>
          <div v-html="form.content"></div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { getMsgList, findById, del, delRead } from "@/services/msg";
export default {
  name: "Msg",

  data() {
    return {
      form: {},
      dialogVisible: false,
      total: 0,
      sysMsgQuery: {
        current: 1,
        size: 10,
        isRead: null,
        titile: "",
      },
      isRead: [
        {
          name: "未读",
          vlaue: 0,
        },
        {
          name: "已读",
          vlaue: 1,
        },
      ],
      msgData: [],
    };
  },

  mounted() {
    this.getMsgData();
  },

  methods: {
    //-------------crud-------------
    deatailsBox(id) {
      this.dialogVisible = true;
      findById(id)
        .then((res) => {
          this.getMsgData();
          this.form = res.data;
        })
        .catch((error) => {});
    },
    getMsgData() {
      getMsgList(this.sysMsgQuery)
        .then((res) => {
          this.msgData = res.data.records;
          this.total = res.data.total;
          //使用消息总线
          this.$bus.$emit("message-change", "消息改变");
        })
        .catch((error) => {});
    },
    delRead() {
      delRead()
        .then((res) => {
          if (res.code === 200) {
            this.getMsgData();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
        })
        .catch((error) => {});
    },
    //删除
    del(id) {
      this.$confirm("是否要删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(id)
            .then((res) => {
              if (res.data) {
                this.getMsgData();
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              }
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消！",
          });
        });
    },
    //---------------其他-----------
    //重置
    resetForm() {
      (this.sysMsgQuery = {
        current: 1,
        size: 10,
        isRead: null,
        titile: "",
      }),
        this.getMsgData();
    },
    //分页处理
    handleSizeChange(val) {
      this.sysMsgQuery.size = val;
      this.getMsgData();
    },
    handleCurrentChange(val) {
      this.sysMsgQuery.current = val;
      this.getMsgData();
    },
  },
};
</script>

<style lang="scss" scoped>
.inline-container {
  height: 40px;
  display: flex;
  align-items: center;

  /* Optional: Align items vertically center if needed */
  .centered-search {
    margin-left: 30%;
    justify-content: center;
    margin-top: 26px;
  }
}

.page {
  display: flex;
  justify-content: flex-end;
}
</style>